import React, { Component } from 'react';
import { Cascader, Tooltip, Empty } from 'antd';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { getAllOrganization } from '@api/organization';
import _ from 'lodash';
import './index.less';

class OrgCascader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [],
      currentWidth: 200
    };
    this.ref = React.createRef();
  }

  updateCurrentWidth = () => {
    this.setState({
      currentWidth: _.get(this.ref, 'current.clientWidth', 200)
    });
  };

  componentDidMount() {
    if (this.props.fetchBySelf) {
      this.loadOrganizationTree();
    }

    this.updateCurrentWidth();
    window.addEventListener('resize', this.updateCurrentWidth);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateCurrentWidth);
  }

  loadOrganizationTree = () => {
    getAllOrganization().then(res => {
      let tree = _.get(res, 'data.data.tree', []);
      this.setState({ options: tree });
    });
  };

  renderPop = label => {
    const { popShow = false } = this.props;
    if (popShow) {
      return (
        <Tooltip
          overlayStyle={{ wordBreak: 'break-all', wordWrap: 'no_wrap' }}
          title={label.join(' / ')}
          placement="topLeft"
        >
          {label.join(' / ')}
        </Tooltip>
      );
    }
    return label.join(' / ');
  };
  onOrgPopupVisibleChange = visible => {
    if (visible && this.props.fetchBySelf) {
      this.loadOrganizationTree();
    }
    if (this.props.onOrgPopupVisibleChange) {
      this.props.onOrgPopupVisibleChange(visible);
    }
  };
  render() {
    let {
      onChange,
      value = [],
      trigger = 'hover',
      fetchBySelf,
      getPopupContainer = triggerNode => triggerNode.parentElement
    } = this.props;
    let options = [];
    if (fetchBySelf) {
      options = _.get(this.state, 'options', []);
    } else {
      options = _.get(this.props, 'options', []);
    }
    const isEmpty = !options.length;
    if (isEmpty) {
      options = [
        {
          _id: '',
          name: (
            <Empty
              description={'暂无数据'}
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              style={{ width: this.state.currentWidth }}
            />
          ),
          disabled: true
        }
      ];
    }
    return (
      <div className="org-cascader-wrapper" ref={this.ref}>
        <Cascader
          value={value[0] ? value : null}
          changeOnSelect
          options={options}
          onChange={onChange}
          displayRender={this.renderPop}
          expandTrigger={trigger}
          style={{ width: '100%' }}
          placeholder="请选择所属部门"
          popupClassName={cn('org-cascader-popup', { empty: isEmpty })}
          onPopupVisibleChange={this.onOrgPopupVisibleChange}
          fieldNames={{ label: 'name', value: '_id', children: 'children' }}
          getPopupContainer={getPopupContainer}
        />
      </div>
    );
  }
}

OrgCascader.propTypes = {
  options: PropTypes.array,
  fetchBySelf: PropTypes.bool,
  onChange: PropTypes.func,
  value: PropTypes.array,
  popShow: PropTypes.bool,
  trigger: PropTypes.string,
  onOrgPopupVisibleChange: PropTypes.func,
  getPopupContainer: PropTypes.func
};

export default OrgCascader;
